CSS bestaat uit declaraties. Declaraties schrijf je ofwel inline, binnenin de start-tag van een html element met behulp van het style attribuut. Of in een stijlregel. Stijlregels staan inline tussen het style element van het head element of in een extern css bestand. beschrijft de opmaak van een html element op je webpagina.
Syntaxis
Video
Inline declareren:
css-declaratie
Je gebruikt het style attribuut om CSS declaraties in te plaatsen:
<!-- Inline css: staat tussen de html door gebruik te
maken van het style attribuut -->
<h1 style="color: aqua;">alle headings zijn blok elementen</h1>
<a style="color: green;">anchers zijn inline elementen: tweede anker</a>
<span style="background-color: red; color: white">span gebruik je om tekst te groeperen inline</span>
<div style="color: burlywood;">gebruik je om tekst te groeperen als blok</div>
De gedeclareerde stijl is alleen van toepassing op deze individuele elementen. Als je alle h1 elementen op de pagina wilt stijlen, heb je stijlregels nodig, interne of externe.
Als je CSS intern of extern wilt declaren gebruik je CSS stijlregels. Elke CSS stijlregel bestaat uit twee delen:
css-stijlregel
Een lijst van één of meer keuzeschakelaars (selectoren, die door komma’s van elkaar gescheiden worden), waarop de stijlregel zal worden toegepast. In deze les beperken we ons tot type-selectoren, de naam van het html element om te selecteren waarop de stijldeclaraties van toepassing zullen zijn.
Enkelvoudige type-selector
We gebruiken 1 selector, namelijk h1:
h1 {
color: orange;
}
Dat betekent dat de stijlregel van toepassing is op alle h1 elementen van de webpagina en dat dus de kleur van de letters in het oranje weergegeven zullen worden.
Type-selector lijst
Deze stijlregel bepaalt gemeenschappelijke eigenschappen voor het html en body element:
body, html {
min-height: 100%
}
De volgende stijlregel bepaalt gemeenschappelijke eigenschappen voor alle titels:
CSS heeft een aantal manieren om elementen op basis van de afstamming (verwantschap) tussen elementen te selecteren. Je gebruikt deze selectoren om meer specifieke keuze te maken.
Descendant combinator
article address
Elk address element dat zich tussen de openings- en sluitingstag van article bevindt. Ook de address elementen die in andere elementen in het article element staan. Bijvoorbeeld ook het address element dat in de footer van article staat.
Child combinator
article > address
Alleen die address elementen die 'kinderen' zijn van het article element. Het address element dat in de footer staat zal niet geselecteerd worden.
Deze stijlregel zal toegepast worden op alle h1 elementen.
Een voorbeeld van een externe CSS stijlregel
Wanneer er iets aan een gebruikte stijl gewijzigd moet worden, hoeft de wijziging niet in elk document afzonderlijk, maar slechts op één plaats in het stijlblad aangebracht te worden.
We slaan de stijl in een ander bestand op, namelijk een extern stijlblad. Het is de gewoonte om externe css bestanden in een submap met de naam css te plaatsen. In ons voorbeeld plaatsen we de stijlregels dus in het bestand css/style.css.
h1
{
color: blue;
background-color: Fuchsia;
}
In de HTML-documenten volstaat het met behulp van het link element een eenvoudige verwijzing naar het extern stijlblad te maken:
ex is de hoogte van de x-height van het huidige lettertype. Voorbeeld height: 1ex; wordt bij mijn weten nooit gebruikt;
%
als je meet in percenten drukken die percenten altijd een percent uit t.o.v. het directe ouderelement of het element dat er in de hiërarchie net boven staat;
als je bijvoorbeeld de breedte en de hoogte van een element in percenten opgeeft moet je ervoor zorgen dat de breedte en de hoogte van alle ouderelement in de hiërarchoe ook in percenten is uitgedrukt.
em - ex meeteenheden
Oefening
Video Oefening Deel 1
We bootsen een recensie-artikel na uit de Standaard van zaterdag 3 oktober 2020. Ik heb stukken tekst weggelaten om het overzichtelijk te maken. Het is niet de bedoeling dat we deze opmaak perfect nabootsen. Onze enige bedoeling is aan de hand van dit voorbeeld met CSS aan de slag te gaan:
Recensie - En eerst is er het woord
De tekst
recensie recensie
En eerst is er het woord
Wessel te Gussinklo (79) schreef alweer een mateloos boek. Het had het einde van zijn alter ego Ewout Meyster kunnen zijn, maar er komt, als God het belieft, nog meer.
Peter Jacobs
Wessel Te Gussinklo
Op weg naar De Hartz
Koppernik, 504 blz., 24,50 €
★★★★☆
Je kunt een poging doen om de inhoud van Op weg naar De Hartz na te vertellen, maar zo eenvoudig werken Wessel te Gussinklo’s romans meestal niet. Op weg naar De Hartz is het vierde boek over de coming of age van Ewout Meyster. Hier staat hij op de rand van de volwassenheid, de ware liefde en het schrijverschap.
Sylvia
In Op weg naar De Hartz pikken we het leven van Ewout Meyster op als hij 18 is, maar verder ligt de chronologie in dit boek grondig overhoop. Hij is intussen een beginnend schrijver, en mede daardoor bijzonder kwetsbaar en beïnvloedbaar. Dat maakt van hem een ideale prooi voor professor Somsen, een charlatan aan wie hij zijn manuscript toevertrouwt.
Vooral daar gaat het om: de moeizame zoektocht van een schrijver naar de juiste woorden - of ‘de goede woorden’
Ondertussen voelt en weet de lezer dat dit een foute boel is, maar Ewout tuint er met open ogen in. Meer nog: Somsen krijgt ook greep op Ewouts seks- en liefdesleven; ook Sylvia, zijn eerste lief, komt in de netten van de gladde goeroe terecht.
Het lijkt allemaal griezelig, maar misschien is het ook om te lachen? De ironische laag die de schrijver aanbrengt, geeft de lezer alvast soelaas; we zitten dan wel in het volle hoofd van Ewout maar we weten meestal beter dan hij. We zouden hem soms willen wakkerschudden, redden zelfs.
Ongetwijfeld put Te Gussinklo voor dit boek weer uit eigen ervaring. Hij studeerde psychologie en kent die wereld van binnenuit. Vandaar, waarschijnlijk, dat het portret van Somsen zo scherp en vernietigend is.
Goede woorden
Wessel te Gussinklo blijkbaar ook niet. Hij is van plan om ons toch nog meer puzzelstukken aan te reiken. Het ‘romannetje’ dat Ewout aan Somsen laat lezen, is teruggevonden (!) en wordt binnenkort gepubliceerd. En misschien komt er nog een deel na het vierde.
Verschenen op zaterdag 3 oktober 2020
Peter Jacobs
Peter Jacobs is redacteur letteren bij De Standaard.
Meer artikels van Peter Jacobs
Links naar de foto's:
cover van het boek: https://media.standaardboekhandel.be/-/media/mdm/product/9789083048079/frontImagesLink.img
foto van Peter Jacobs: https://static.standaard.be/Assets/Images_Upload/2013/05/03/DSMedewerkers_Peter_Jacobs.jpg
Voorbereiding
Een nieuwe submap maken in de rootmap webtechnologie met de naam labo3.
In de map labo3 een nieuw bestand creëren met de naam recensie-op-weg-naar-de-hartz.html.
De basisstructuur van html toevoegen met ! tab.
Het title element wijzigen Recensie Op weg naar de Hartz.
Voeg het nav element en de link toe om terug te keren naar de index.html pagina.
Voeg het article element toe.
Kopieer de tekst van de recensie en plak die tussen de article openings- en sluitingstag.
Klik op shift alt f om de tekst te reformateren.
HTML toevoegen:
Recensie - En eerst is er het woord - ingedeeld met html
Opmaak met CSS
De tekst die in section staat moet in hoofdletters. We gebruiken interne CSS en voegen daarvoor een stijlregel toe in het style element van het head element:
Om het eerste woord recensie in het rood te schrijven zetten we het woord tussen een span element en gebruiken een inline declaratie om de tekst in het rood weer te geven:
Na wat opzoekwerk op de website van De Standaard heb ik de lettertypes gevonden die in het artikel worden gebruikt. Het algemene lettertype is Georgia. Dit wordt toegekend aan het body element. CSS betekent cascading style sheet, d.w.z. dat het lettertype door alle elementen in body overgeërfd wordt. Als alternatief lettertype kiezen we een generiek lettertype, namelijk serif.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="application-name" content="Webtechnologie">
<meta name="description" content="Oefening beginnen met CSS">
<meta name="keywords" content="html, css, selector, style declaration, style rule, border, color, font">
<meta name="author" content="Jef Inghelbrecht">
<meta name="date" content="2020-10-05">
<meta name="time" content="12:23:33">
<style>
body {
font-family: Georgia,serif;
}
section {
text-transform: uppercase;
}
</style>
<title>Recensie Op weg naar de Hartz</title>
</head>
Het lettertype van de tekst in het section element is anders. Dus specificeren we de font-family eigenschap van het section element:
De letter in de introductie (header) is iets groter. Vermits we een stijlregel willen die alleen van toepassing is op de header die een directe afstammeling (kind) is van article gebruiken we de child combinator. Aan het font-size attribuut geven we de waarde larger. Dit is een relatieve maat. Het is beter om die grootte niet expliciet op te geven maar dat door de browser te laten berekenen. Dit zorgt ervoor dat je website responsive is en op alle schermen goed weer gegeven zal worden:
article > header {
font-size: larger;
}
Een address element met de gegevens van de bron, in dit geval de naam van de auteur. De naam is in een ander lettertype en in het vet
html:
<address>Peter Jacobs</address>
css:
Standaard staat het address element in schuinschrift. Dat zetten we weer recht met de waarde normal toe te kennen aan het attribuut font-style. Verder maken we de font-size smaller en stellen we een ander font-family in dan die van het body element:
Een figure met img (de link naar de afbeelding vind je hierboven) en figcaption toevoegen.
html:
<figure>
<img src=" https://media.standaardboekhandel.be/-/media/mdm/product/9789083048079/frontImagesLink.img"
alt="Kaft van het boek Op weg naar De Hartz van Wessel Te Gussinklo">
<figcaption>
<span>Wessel Te Gussinklo<br>
Op weg naar De Hartz</span><br>
Koppernik, 504 blz., 24,50 €<br>
<!-- ★☆ --> ★★★★☆
</figcaption>
</figure>
css:
Het lettertype is hetzelfde als voor het tekst in het section element. De font-size is smaller. We gebruiken een child combinator om het figcaption element op te maken:
Zoals je hierboven kan zien hebben we een span element toegevoegd om eerste twee regels af te zonderen. Want die moeten in het vet worden weergegeven. We gebruiken weer een child combinator om dit te doen:
Paragrafen erven de font-family over van body en de font-size erft de standaard grootte van 16 pixels. We hoeven dus geen extra stijlregel toe te voegen. Wel moeten we overal waar nodig het schuinschrift toevoegen met de em tag:
<p>Je kunt een poging doen om de inhoud van <em>Op weg naar De Hartz</em> na te vertellen, maar zo eenvoudig
werken Wessel te Gussinklo’s romans meestal niet. <em>Op weg naar De Hartz</em> is het vierde boek
over de coming of age van Ewout Meyster. Hier staat hij op de rand van de volwassenheid, de ware
liefde en het schrijverschap.</p>
Video 3
De afbeelding opmaken
De afbeelding is veel te groot. We gebruiken de height eigenschap om die aan te passen. Pas altijd maar 1 zijde aan. Als je zowel de hoogte als de breedte instelt zal de verhouding tussen die twee niet meer kloppen.
Het img element moet links zweven van het figcaption element. Daarvoor gebruik je de float eigeschap. Daarmee geef je aan dat de elementen onder het img element rechts van het img element komen te staan. En dat voor zoveel elementen als er naast het img element plaats is.
Er moet witruimte rechts van en onder de afbeelding toegevoegd worden. Anders plakt de tekst van de figcaption tegen de afbeelding en die van de daarop volgende paragraaf tegen de rand van de afbeelding.
border-margin-padding
We kunnen dat voor elke rand doen:
margin-right: 1rem;
margin-bottom: 1rem;
Of een shorthand property gebruiken:
margin: 0 1rem 1rem 0;
In 1 declaratie stellen we kloksgewijs de boven-, rechter-, onder- en linkerkantlijn in.
Stijlregel voor de afbeelding in het figure element van een artikel:
Op de afbeelding hieronder zie je dat ook de paragraaf die na de figcaption staat rechts van de afbeelding staat:
img-float-left
Dat is niet wat we willen. Dus gebruiken we de clear eigenschap van het eerste p element dat na de figure komt om aan te geven dat de paragraaf niet rechts van de afbeelding moet komen te staan. We gebruiken daarvoor de adjacent sibling combinator:
/* adjacent sibling selector (+)
selecteert het element dat direct volgt op het eerste opgegeven element */
article > figure +p {
clear: both;
}
Met dit als resultaat:
p-clear-both
Boven en onder het figure element staat een lijn, maar alleen voor het figure element dat een kind is van het article element, niet het figure element dat in het footer element staat. Daarom gebruiken we de child combinator:
article > figure {
border-top: solid black 1px;
border-bottom: solid black 1px;
height: 12rem;
padding-top: 1rem;
}
Het recensieartikel moet in het midden gecentreerd staan. Daarvoor stellen we de padding eigenschap van het body element in. We gebruiken het percent teken om ervoor te zorgen dat het artikel in het midden staat ongeacht de grootte van het scherm (responsive):
<footer>
<p>Verschenen op zaterdag 3 oktober 2020</p>
<figure>
<img src="https://static.standaard.be/Assets/Images_Upload/2013/05/03/DSMedewerkers_Peter_Jacobs.jpg"
alt="Foto van Peter Jacobs">
<figcaption>
<p>Peter Jacobs</p>
<p>Peter Jacobs is redacteur letteren bij De Standaard.</p>
<a href="#">Meer artikels van Peter Jacobs</a>
</figcaption>
</figure>
</footer>
css
De de paragraaf met verschijningsdatum moet in het grijs. We gebruiken nu de hexadecimale waarde voor grijs. Dat is alleen geldig voor de p elementen die kind zijn van footer. We gebruiken dus weer de child combinator:
article footer > p {
color: #808080;
}
De link naar de artikels van Peter Jacobs staat in het rood. Nu gebruiken we de rgb functie:
article footer figcaption a {
color: rgb(255, 0, 0);
}
De naam van de auteur staat in een ander lettertype. De naam moet in hoofdletters en de corpsgrootte is groter. Tussen de paragrafen staat geen witruimte, dus zetten we de onderkantlijn op 0:
De naam staat in het eerste p element in de figcaption. Alle paragrafen na de eerste moeten 'normaal' weergegeven worden. We kunnen dus weer de adjacent sibling combinator gebruiken, namelijk alle paragrafen die op een andere paragraaf volgen:
